<template>
  <div id="app">
    <section
      class="m-card"
      style="border-radius: 0px; padding: 0px; margin-bottom: 8px"
    >
      <!-- 顶部搜索框 -->
      <van-search
        input-align="center"
        shape="round"
        v-model="value"
        placeholder="点击进行搜索"
        @click="search"
      />
      <!-- 轮播图 -->
      <van-swipe
        :style="{ height: h }"
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item v-for="(item, index) in banner.data" :key="index">
          <img :src="item.img_src" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- 分类栏 -->
      <van-grid :border="false" :column-num="5">
        <van-grid-item>
          <a href="/listenbookList" class="index-nav-link tingshu">
            <van-icon name="column" />
          </a>
          <span class="index-nav-label">阅读</span>
        </van-grid-item>
        <van-grid-item>
          <a href="" class="index-nav-link kecheng">
            <van-icon name="audio" />
          </a>
          <span class="index-nav-label">课程</span>
        </van-grid-item>
        <van-grid-item>
          <a href="" class="index-nav-link zhuanlan">
            <van-icon name="graphic" />
          </a>
          <span class="index-nav-label">专栏</span>
        </van-grid-item>
        <van-grid-item>
          <a href="/magazinelist" class="index-nav-link zazhi">
            <van-icon name="newspaper-o" />
          </a>
          <span class="index-nav-label">杂志</span>
        </van-grid-item>
        <van-grid-item>
          <a href="" class="index-nav-link xunlianying">
            <van-icon name="chart-trending-o" />
          </a>
          <span class="index-nav-label">训练营</span>
        </van-grid-item>
      </van-grid>
    </section>
    <section
      class="m-card"
      style="border-radius: 0px; padding: 0px 16px 8px; margin-bottom: 8px"
    >
      <!-- 可下拉刷新的书面布局 -->
      <van-row type="flex" justify="space-between" align="center">
        <van-col>
          <h3 class="module-title">领读好书</h3>
        </van-col>
        <van-col>
          <router-link to="listenbookList" class="module-more"
            >查看全部</router-link
          >
          <!-- <a href="" class="module-more">查看全部</a> -->
        </van-col>
      </van-row>
      <!-- 领读好书部分 -->
      <div v-if="books">
        <book-list v-for="(item, index) in books" :key="index" :books="item" />
      </div>
    </section>
    <!-- 杂志 -->
    <section
      class="m-card"
      style="border-radius: 0px; padding: 0px 16px 8px; margin-bottom: 40px"
    >
      <!-- 读者杂志部分 -->
      <van-row type="flex" justify="space-between" align="center">
        <van-col>
          <h3 class="module-title">读者杂志</h3>
        </van-col>
        <van-col>
          <a href="" class="module-more">查看全部</a>
        </van-col>
      </van-row>
      <!-- 读者杂志 -->
      <van-grid :border="false" :column-num="2" gutter="10px">
        <van-grid-item @click="toMaga" style="margin-top: -16px">
          <div class="magazine-cover">
            <van-image class="cover-img" src="/Home_Img/book2.jpg" />
          </div>
          <h4 style="margin-top: 10px; margin-bottom: 4px; font-weight: 400">
            2022年第2期
          </h4>
          <div style="font-size: 14px">
            <span style="color: gray">￥3</span>
            <span style="color: orange">会员免费</span>
          </div>
        </van-grid-item>
        <van-grid-item @click="toMaga" style="margin-top: -16px">
          <div class="magazine-cover">
            <van-image class="cover-img" src="/Home_Img/book2.jpg" />
          </div>
          <h4 style="margin-top: 10px; margin-bottom: 4px; font-weight: 400">
            2022年第2期
          </h4>
          <div style="font-size: 14px">
            <span style="color: gray">￥3</span>
            <span style="color: orange">会员免费</span>
          </div>
        </van-grid-item>
        <van-grid-item @click="toMaga" style="margin-top: -16px">
          <div class="magazine-cover">
            <van-image class="cover-img" src="/Home_Img/book2.jpg" />
          </div>
          <h4 style="margin-top: 10px; margin-bottom: 4px; font-weight: 400">
            2022年第2期
          </h4>
          <div style="font-size: 14px">
            <span style="color: gray">￥3</span>
            <span style="color: orange">会员免费</span>
          </div>
        </van-grid-item>
        <van-grid-item @click="toMaga" style="margin-top: -16px">
          <div class="magazine-cover">
            <van-image class="cover-img" src="/Home_Img/book2.jpg" />
          </div>
          <h4 style="margin-top: 10px; margin-bottom: 4px; font-weight: 400">
            2022年第2期
          </h4>
          <div style="font-size: 14px">
            <span style="color: gray">￥3</span>
            <span style="color: orange">会员免费</span>
          </div>
        </van-grid-item>
      </van-grid>
    </section>
    <!-- 底部标签栏Tabbar -->
    <van-tabbar v-model="active" active-color="#3eaf7c">
      <van-tabbar-item icon="wap-home" name="/" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="goods-collect" name="/order" to="/order"
        >已购</van-tabbar-item
      >
      <van-tabbar-item icon="friends" name="/me" to="/me">我的</van-tabbar-item>
      <router-view />
    </van-tabbar>
  </div>
</template>

<script>
import BookList from '../components/BookList.vue'
export default {
  components: { BookList },
  data() {
    return {
      books: '',
      value: '',
      active: '/',
      h: '130px',
      banner: '',
    }
  },
  mounted() {
    this.getBanner()
    this.getBooks()
  },
  watch: {
    '$route.path': {
      handler(val) {
        this.active = val
      },
      immediate: true,
    },
  },
  methods: {
    search() {
      this.$router.push('search')
    },
    toMaga() {
      this.$router.push('/magazinelist')
    },
    getBanner() {
      let url = 'advertise'
      this.axios.get(url).then(res => {
        console.log('轮播图:', res)
        this.banner = res.data
      })
    },
    getBooks() {
      let url = 'details'
      this.axios.get(url).then(res => {
        console.log('书:', res.data.data)
        let arr = res.data.data
        let newarr = []
        let count = 5
        var shuffled = arr.slice(0),
          i = arr.length,
          min = i - count,
          temp,
          index
        while (i-- > min) {
          index = Math.floor((i + 1) * Math.random())
          temp = shuffled[index]
          shuffled[index] = shuffled[i]
          shuffled[i] = temp
        }
        newarr = shuffled.slice(min)
        this.books = newarr
      })
    },
  },
}
</script>

<style lang="scss" scoped>
#app {
  max-width: 640px;
  margin: 0 auto;
  color: #333;
  background-color: #f7f7f7;
  word-break: break-all;
}
.m-card {
  background-color: #fff;
  box-sizing: border-box;
}
.van-swipe {
  margin: 0 15px 0 15px;
}
.van-swipe-item img {
  width: 100% !important;
}
.index-nav-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
  font-size: 22px;
  line-height: 22px;
  color: #fff;
  border-radius: 99px;
}
.index-nav-link.tingshu {
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ffa783),
    to(#fb753e)
  );
  background-image: linear-gradient(-180deg, #ffa783, #fb753e);
}
.index-nav-link.kecheng {
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#ffb05c),
    to(#ffcf81)
  );
  background-image: linear-gradient(0deg, #ffb05c, #ffcf81);
}
.index-nav-link.zhuanlan {
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#abd8fa),
    to(#56acf5)
  );
  background-image: linear-gradient(-180deg, #abd8fa, #56acf5);
}
.index-nav-link.zazhi {
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#baefd7),
    to(#68d6c3)
  );
  background-image: linear-gradient(-180deg, #baefd7, #68d6c3);
}
.index-nav-link.xunlianying {
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#cda1ea),
    to(#657acb)
  );
  background-image: linear-gradient(-180deg, #cda1ea, #657acb);
}
.index-nav-label {
  font-size: 12px;
  color: #333;
  line-height: 20px;
}
.van-row--flex {
  display: flex;
}
.van-row--justify-space-between {
  justify-content: space-between;
}
.van-row--align-center {
  align-items: center;
}
.module-title {
  font-family: PingFangSC-Medium;
  font-size: 22px;
  color: #333;
  line-height: 36px;
}
h3 {
  display: block;
  font-size: 1.17em;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
.module-more {
  font-size: 14px;
  color: #999;
  line-height: 22px;
}
// 读者杂志部分
.cover-img {
  border: 1px solid #ccc;
}
</style>
